@use "../../variables.scss";

.dashboard-card {
  background-color: variables.$really-light-accent;
  border-radius: 4px;
  padding: 15px;
  border: 1px solid transparent;

  &.gitops {
    background-color: variables.$gitops-color;
  }

  &.inverse-card {
    border-color: variables.$light-accent;
    background-color: #ffffff;
  }

  &.graph {
    display: inline-block;
    min-height: auto;
    max-height: none;
    height: auto;
    margin-right: 20px;
    margin-top: 10px;
    width: 344px;

    &:nth-child(3n) {
      margin-right: 0;
    }
    &:nth-child(n + 4) {
      margin-top: 20px;
    }
  }

  &.expired-license {
    background-color: var(--error-color)-light;
  }
}

.legends {
  &.legends::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  &.legends::-webkit-scrollbar:vertical {
    width: 11px;
  }
  &.legends::-webkit-scrollbar:horizontal {
    height: 11px;
  }
  &.legends::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.card-link {
  color: var(--link-color);
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;

  &:hover {
    text-decoration: underline;
  }
}

.grayed-dashboard-card {
  min-width: 260px;
  max-height: 200px;
  width: 260px;
  height: 200px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.2s;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px;
  padding: 12px 12px 0px 12px;
  background-color: #f8f8f8;
}

.LicenseCard-content--wrapper {
  padding: 8px;
  border-radius: 4px;
  background-color: #ffffff;
}

.GraphCard-content--wrapper {
  padding: 8px;
  border-radius: 4px;
  background-color: #ffffff;
}

.SnapshotsCard-content--wrapper {
  padding: 8px;
  border-radius: 4px;
  background-color: #ffffff;
}

.VersionCard-content--wrapper {
  padding: 8px;
  border-radius: 4px;
  background-color: #ffffff;

  &.is-new {
    -webkit-animation: newVersion 9s ease forwards; /* Safari 4+ */
    -moz-animation: newVersion 9s ease forwards; /* Fx 5+ */
    -o-animation: newVersion 9s ease forwards; /* Opera 12+ */
    animation: newVersion 9s ease forwards; /* IE 10+, Fx 29+ */
    animation: newVersion 9s ease forwards;
  }
}

.gitops-enabled-block {
  background-color: #e1f0f1;
  border-radius: 4px;
  padding: 8px;
}

.no-deployed-version {
  padding: 25px;
  border-radius: 4px;
  border: 1px dashed variables.$border-color;
}

@media screen and (min-width: 642px) {
}

@media screen and (min-width: 960px) {
}

@media screen and (min-width: 1040px) {
}

@-webkit-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@-moz-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@-o-keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
@keyframes newVersion {
  0% {
    background-color: #fff7dc;
  }
  100% {
    background-color: #ffffff;
  }
}
